<template>
<div>
    <div class="layout">
    <div class="layout-left">
      <div class="layout-contain">
        <div class="swiper">
          <el-carousel indicator-position="outside">
            <!-- 取2个作为轮播图 -->
            <el-carousel-item
              v-for="(item, index) in articleRecommendList.slice(0, 2)"
              :key="index"
            >
              <router-link
                :to="{
                  path: '/articleDetail',
                  query: { articleId: item.articleId },
                }"
                :key="item.articleId"
              >
                <img :src="item.firstPicture" />
                <div class="swipertop">
                  <p>{{ item.articleTitle }}</p>
                </div>
              </router-link>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="swiper-bttom">
          <ul>
            <!-- 这个也是循环 -->
            <li
              v-for="item in articleRecommendList.slice(2, 5)"
              :key="item.articleId"
            >
              <!-- 跳转到文章详情页面  并且携带文章Id -->
              <router-link
                :to="{
                  path: '/articleDetail',
                  query: { articleId: item.articleId },
                }"
                :key="item.articleId"
              >
                <div class="swiper-botimg">
                  <img :src="item.firstPicture" />
                </div>
                <p>{{ item.articleTitle }}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
     <articleList :typeId="-1"></articleList>
    
    </div>
    <div class="layout-right">
      <div class="hot-reccomd">
        <div class="layout-rtop"><i class="iconfont" style="color: red">&#xe8ab;</i>热门推荐</div>
        <div class="layout-rboot">
          <ul>
            <li v-for="(item, index) in hotBarList" :key="item.articleId">
              <router-link
                :to="{
                  path: '/articleDetail',
                  query: { articleId: item.articleId },
                }"
              >
                <div class="rboot">
                  <p>{{ index + 1 }}</p>
                </div>
                <div class="rboot-right">
                  <p>{{ item.articleTitle }}</p>
                  <!-- 这里的意思是 如果你formatDate存在 并且前有值就会默认调用后面那个过滤器 -->
                  <span style="margin: left">{{
                    item.updateTime | formatDate
                  }}</span>
                  <span style="float: right">{{ item.typeName }}</span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="hot-record">
        <div class="record-rtop"><i class="iconfont">&#xe63d;</i>云标签</div>
        <div class="record-rboot">
          <tag-cloud></tag-cloud>
        </div>
      </div>
    </div>
  </div>
  <ys-load1 :isShow="true"></ys-load1>
</div>
</template>

<script>
import "@/assets/css/article.css";
import {
  articleBarList,
  hotBarList,
  selectRecommend,
  ArticleList,
  selectArticleList,
} from "@/api/index";
import { formatDate } from "@/utils/date";
import tagCloud from "@/components/tagCloud.vue";
import articleList from "@/components/articleList.vue";
export default {
  components: { tagCloud,
  articleList },
  name: "article",
  data() {
    return {
      articleList: [],
      hotBarList: [],
      articleRecommendList: [],
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.$YsLoad1.startLoad()
    this.getArticleList();
    this.getHotBarList();
    this.getArticleRecommendList();
    this.$YsLoad1.endLoad()
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getArticleList() {
      selectArticleList().then((response) => {
        this.articleList = response.data;
      });
    },
    getHotBarList() {
      hotBarList().then((response) => {
        this.hotBarList = response.data; // 这个就是获取data中的数据呀
        // hotBarList 不就是一个列表呀
      });
    },
    getArticleRecommendList() {
      selectRecommend().then((response) => {
        this.articleRecommendList = response.data;
      });
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style>

</style>
